<template>
    <div class="person">
        <h1>setup</h1>
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
    <div class="person">
        <h1>ref</h1>
        <h2>汽车：{{ car.name }}</h2>
        <h2>价格：{{ car.price }}W</h2>
        <button @click="changePrice">更新价格</button>
        <button @click="changeBrand">更新品牌</button>
        <button @click="changeCarName">更新name</button>
    </div>
    <div class="person">
        <h1>reactive</h1>
        <ul>
            <li v-for="item in list" :key="item">{{ item }}</li>
        </ul>
        <button @click="addList">添加</button>
        <button @click="updateList">修改前3个</button>
    </div>
</template>

<!-- 
<script lang="ts">
export default {
    name: 'Person',
    beforeCreate() {
        console.log('beforeCreate')
    },
    // setup() {
    //     console.log('setup')

    //     let name = '张三'
    //     let age = 18
    //     let tel = 13812341234

    //     function changeName() {
    //         name = '李四'
    //     }

    //     function changeAge() {
    //         age = 333
    //     }

    //     function showTel() {
    //         alert(tel)
    //     }

    //     return {
    //         name,
    //         age,
    //         changeName,
    //         changeAge,
    //         showTel,
    //     }

    //     // setup 可以返回渲染函数
    //     // return () => 'HTML'
    // }
}
</script> 
-->

<!-- setup() 语法糖 -->
<script lang="ts" setup name="Person">

import { ref, reactive, toRef } from 'vue'

let name = ref('张三')
let age = ref(18)
let tel = 13812341234

function changeName() {
    name.value = '李四'
}

function changeAge() {
    age.value = 333
}

function showTel() {
    alert(tel)
}


let car = reactive({ name: '奔驰', price: 30 })
let carName = toRef(car, 'name')

function changeCarName() {
    carName.value += '~'
}
function changePrice() {
    car.price += 10
}
function changeBrand() {
    Object.assign(car, { name: '宝马', price: 15 })
}


let list = reactive([])
function addList() {
    list.push(Math.floor(Math.random() * 10) as never)
}

function updateList() {
    list[0] = 1 as never
    list[1] = 2 as never
    list[2] = 3 as never
}

</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

button {
    margin: 0 5px;
}
</style>